<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<style type="text/css">
			html,body { height:100%; }
			.car_insure_total{ margin-bottom: 0px; padding: 25px 0; background: url(../../image/img_08.jpg) no-repeat center top; background-size: 100% 100%;}
			.car_insure_total div{ padding: 10px 0 15px;}
			.car_insure_total p{ float: left; position: relative; width: 50%; text-align: center; font-size: 12px; color: #fff;}
			.car_insure_total b{ display:block; font-size: 25px; font-weight: 600;}
			.car_insure_total p:first-child::after{ position:absolute; content: ""; right: 0; top: 10px; bottom: 5px; border-right: 1px #fff solid; transform: scaleX(0.5);}
			.car_insure_total a{ display:block; margin: 0 auto; width: 90px; height: 30px; border: 1px #fff solid; line-height: 30px; text-align: center; font-size: 12px; color: #fff; border-radius: 4px;}
			.line10 { display:block; content: ""; height:10px; background:#F7F8FA; }
			.car_insure_info{ background-color:#fff;}
			.car_insure_info .tab{ height: 45px; background-color: #fff; position: relative;}
			.car_insure_info .tab::after{ position:absolute; content: ""; left: 0; right: 0; bottom: 0; border-bottom: 1px #d5d5d5 solid; transform: scaleY(0.5);}
			.car_insure_info .tab a{ float: left; width: 33.33%; text-align: center; font-size: 15px; color: #333; line-height: 45px; position: relative;}
			.car_insure_info .tab a.on{ color:#3262F1; font-weight:500; background-color: transparent;}
			.car_insure_info .tab a.on::after{ position: absolute; content: ""; left: 50%; margin-left: -10px; bottom: 0; width: 20px; border-bottom: 2px #3262F1 solid; z-index: 2;}
			.car_insure_info .list{ padding: 15px 15px 50px;}
			
			.s_fix a{ display:block; text-align: center; line-height: 50px; height: 50px; background: linear-gradient(to right, #3053F0, #469BF7); font-size: 15px; color: #fff; z-index: 9;}
			.s_fix a i{ display:inline-block; vertical-align: top; height: 50px; padding-left: 23px; background: url(../../image/img_46.png) no-repeat left center; background-size: 18px auto;}

		</style>
	</head>
	<body>
		<header class="header" id="header" style="height:274px;">
			<ul class="wrapper">
				<a href="javascript:;" tapmode onclick="closeWin();" class="btn back"></a>
				<h1>车辆联保</h1>
			</ul>
			<div class="car_insure_total">
			<div class="clearfix">
				<p><b id="insureusercount">-</b>已联保人数</p>
				<p><b id="insurefee">-</b>总联保金额（元）</p>
			</div>
			<a href="javascript:;" tapmode="btnpress" onclick="openNavWin('#ddd','insuretype_win','insuretype_frm.html','联保类型',false,false,true,[],{});">参加联保</a>
		</div>
		<div class="line10"></div>
		<div class="car_insure_info">
			<ul class="tab" id="tablist">
				<a href="javascript:;" tapmode onclick="changetab(0);" class="on">我的车辆联保</a>
				<a href="javascript:;" tapmode onclick="changetab(1);">最新参保客户</a>
				<a href="javascript:;" tapmode onclick="changetab(2);">了解车辆联保</a>
			</ul>
		</div>
		</header>
		<footer id="footer" style="height:50px;">
			<div class="s_fix">
				<a href="javascript:;" tapmode="btnpress" onclick="call();"><i>电话咨询</i></a>
			</div>
		</footer>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/app.js"></script>
	<script type="text/javascript" src="../../script/permission.js"></script>
	<script type="text/javascript">
		var tel = '';
		var aTabList,curIndex = 0;
		apiready = function() {
			api.parseTapmode();
			var header = $api.byId('header');
			$api.fixStatusBar(header);
			var header = $api.byId('header');
			$api.fixStatusBar(header);
			var headerPos = $api.offset(header);
			var body_h = $api.offset($api.dom('body')).h;
			var foot = $api.dom('footer');
			var foot_h = $api.offset(foot).h;
			var rect_h = body_h - headerPos.h - foot_h - api.safeArea.bottom;
			
			aTabList = document.getElementById("tablist").children;
			
			api.openFrameGroup({
				name: 'insuregroup',
				bounces: false,
				rect: {
					x: 0,
					y: headerPos.h,
					w: 'auto',
					h: rect_h
				},
				index: 0,
				frames: [{
					name: 'myinsure_frm',
					url: 'myinsure_frm.html',
					bgColor: '#fff'
				}, {
					name: 'lastestinsure_frm',
					url: 'lastestinsure_frm.html',
					bgColor: '#fff'
				}, {
					name: 'aboutinsure_frm',
					url: 'aboutinsure_frm.html',
					bgColor: '#fff'
				}]
			}, function(ret, err) {
				//curIndex = ret.index;
				changeIndex(ret.index);
			});
			getJsonFromAPI();
			api.addEventListener({
				name : 'reloadpage'
			}, function(ret, err) {
				getJsonFromAPI();				
			});
		}
		function call() {
			var pername = 'phone';
			var perdesc = '拨打电话';
			if (api.systemType == "android") {
				if(!confirmPer(pername,perdesc,'')){
					return;
				}
			}
			if(tel != '')
			{
				if(api.systemType == 'ios'){
					api.call({
						type: 'tel_prompt',
						number: tel
					});
				}else{
					api.confirm({
						title: '确认拨打电话吗?',
						msg: tel,
						buttons: ['取消', '呼叫']
					}, function(ret, err) {
						var index = ret.buttonIndex;
						if(index == 2)
						{
							api.call({
								type: 'tel',
								number: tel
							});
						}
					});
				}
			}
			event.stopPropagation();
		}
		function getJsonFromAPI() {
			//从接口获取查询数据
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret.value) {
					var userinfo = JSON.parse(ret.value);
					api.ajax({
						url: ApiUrl + '/v1/insure',
						method: 'get',
						cache: false,
						timeout: 10,
						headers: {
							authorization: kAppKey+';'+userinfo.access_token+';'+userinfo.uid
						}
					}, function(ret, err) {
						if (ret) {
							tel = ret.config.companytel;
							$api.text($api.byId('insureusercount'),ret.config.insureusercount);
							$api.text($api.byId('insurefee'),ret.config.insurefee);
						} else {
							if(err.statusCode==402)
							{
								Relogin();
							}
							else
							{
								console.log(JSON.stringify(err));
								toast('网络异常');
							}
						}
					});
				}
			});
		}
		var changeIndex = function(idx){
			if (idx == curIndex) return;
			curIndex = idx;
			for (var i = 0; i < aTabList.length; i++) {
					if (i == idx) {
					$api.addCls(aTabList[idx],'on');
					} else{
					$api.removeCls(aTabList[i],'on');
					}
			}

		}
		function changetab(idx)
		{
			if (idx == curIndex) return;
			curIndex = idx;
			for (var i = 0; i < aTabList.length; i++) {
				if (i == idx) {
					$api.addCls(aTabList[idx],'on');
				} else{
					$api.removeCls(aTabList[i],'on');
				}
			}
			api.setFrameGroupIndex({
				name: 'insuregroup',
				index: idx,
				scroll: true
			});
		}
		function closeWin(){
			api.closeWin({
			});
		}
	</script>
</html>
